<template>
  <view>


    <!-- 顶部 -->
    <image class="top-image"    mode="aspectFill"  style="opacity: 0.8" src="/static/images/background/home/top-default-image.png"></image>
    <view class="top-body-center">
      <view class="top-body d-flex">
        <image mode="widthFix" src="/static/images/icon/common/riji.png" class="lovers-avatar border-radius-circle">
        </image>
        <view class="d-flex flex-column text-center">
          <text class="font-bold color-black">我们相恋了 {{timeDifference}} 天</text>
          <image mode="heightFix" src="/static/images/background/home/top-bg1.png" class="top-image-bg1"></image>
        </view>
        <image mode="widthFix" src="/static/images/icon/common/riji.png" class="lovers-avatar border-radius-circle">
        </image>
      </view>
    </view>




  </view>





  </view>
</template>

<<script>
  export default {
  data() {
  return {
  timeDifference: ''
  };
  },
  onLoad() {
  this.calculateTimeDifference();
  setInterval(this.calculateTimeDifference, 1000); // 每隔1秒更新一次时间差
  },
  methods: {
  calculateTimeDifference() {
  const targetDate = new Date('2018-09-22 00:00:00'); // 设置目标日期和时间
  const currentDate = new Date(); // 获取当前日期和时间
  const timeDifference =currentDate -targetDate ; // 计算时间差（毫秒）
  // 将时间差转换为时分秒格式
  const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
  const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60)) ;
  const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

  // this.timeDifference = `${days}天${hours}小时${minutes}分钟${seconds}秒`;
    this.timeDifference = `${days}`;
  }
  }
  };

  </script>


  <style>
    .top-image {
      position: absolute;
      top: 0;
      width: 100%;
      height: 700rpx;
      z-index: -10;
      border-radius: 0 0 30rpx 30rpx;
    }

    .top-body {
      margin: 30rpx;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }

    .top-body-center {
      height: 300rpx;
      margin-top: 200rpx;
    }


    .d-flex {
      display: -ms-flexbox;
      display: flex;
    }


    .lovers-avatar {
      width: 100rpx;
      height: 100rpx;
      box-shadow: 0 0 10px #FEB5B6;
      border: solid #ffffff 2px;
    }

    .border-radius-circle {
      border-radius: 50%;
    }

    .flex-column {
      -ms-flex-direction: column;
      flex-direction: column;
    }

    .text-center {
      text-align: center !important
    }


    .font-bold {
      font-weight: bold;
    }

    .color-black {
      color: var(--nest-BLACK);
    }

    .top-image-bg1 {
      height: 50rpx;
      width: auto;
    }
  </style>